<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 源数据
    let person = {
      name: '张三',
      age: 18
    }

    // 模拟Vue2实现响应式
    // #region
    /* let p = {}
    Object.defineProperty(p, 'name', {
      get() {
        return person.name
      },
      set(value) {
        console.log('有人修改了name属性');
        person.name = value
      }
    })
    Object.defineProperty(p, 'age', {
      get() {
        return person.age
      },
      set(value) {
        console.log('有人修改了age属性');
        person.age = value
      }
    }) */
    // #endregion

    // 模拟Vue3实现响应式
    const p = new Proxy(person, {
      get(target, propName) {
        console.log(`有人读取了p身上的${propName}属性`);
        return Reflect.get(target, propName)
      },
      set(target, propName, value) {
        console.log(`有人修改或追加了p身上的${propName}属性`);
        Reflect.set(target,propName,value)
      },
      deleteProperty(target, propName) {
        console.log(`有人删除了p身上的${propName}属性`);
        return Reflect.defineProperty(target,propName)
      },
    })
  </script>
</body>
</html>